<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>News</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="css/main.css" />
	<link type="text/css" rel="stylesheet" href="../../css/pepper-grinder/jquery-ui-1.8.16.custom.css" />
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="js/jquery.tabswitch.js"></script>
	<script type="text/javascript" src="../../js/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="../../js/popeScroll.js"></script>
	<script language="JavaScript" type="text/JavaScript">
		$(document).ready(function() {
			$(window).resize(function() {
				refresh();
			});	
			
			$.getJSON("news_getNewsByTime.do",{length:"20"},function(json){					
				for(var i=0;i<json.length;i++){			
					var index = "1";
					var divstr = getDivStr(json[i]);
					addConToHtml(i,index,divstr);
				}
				refresh();
			});
			
			$.getJSON("news_getNewsByTypeByTime.do",{length:"20",type:"国际"},function(json){
				for(var i=0;i<json.length;i++){
					
					var index = "2";
					var divstr = getDivStr(json[i]);
					addConToHtml(i,index,divstr);
				}
				refresh();
			});
			$.getJSON("news_getNewsByTypeByTime.do",{length:"20",type:"国内"},function(json){
				for(var i=0;i<json.length;i++){
					
					var index = "3";
					var divstr = getDivStr(json[i]);
					addConToHtml(i,index,divstr);
				}
				refresh();
			});
			$.getJSON("news_getNewsByTypeByTime.do",{length:"20",type:"社会"},function(json){
				for(var i=0;i<json.length;i++){
					var index = "4";
					var divstr = getDivStr(json[i]);
					addConToHtml(i,index,divstr);
				}
				refresh();
			});
			$.getJSON("news_getNewsByTypeByTime.do",{length:"20",type:"明星"},function(json){
				for(var i=0;i<json.length;i++){
					var index = "5";
					var divstr = getDivStr(json[i]);
					addConToHtml(i,index,divstr);
				}
				refresh();
			});
			$.getJSON("news_getNewsByTypeByTime.do",{length:"20",type:"音乐"},function(json){
				for(var i=0;i<json.length;i++){
					var index = "6";
					var divstr = getDivStr(json[i]);
					addConToHtml(i,index,divstr);
				}
				refresh();
			});
			$.getJSON("news_getNewsByTypeByTime.do",{length:"20",type:"探索"},function(json){
				for(var i=0;i<json.length;i++){
					var index = "7";
					var divstr = getDivStr(json[i]);
					addConToHtml(i,index,divstr);
				}
				refresh();
			});
			
			var parwinwidth = $(window.parent).width();
			var parwinheight = $(window.parent).height();
			
			$('.subtab').tabSwitch('create', {type: 'slide', height: parwinheight*0.8, width: parwinwidth/2-5},function(){
				
			});
			
			$(".tab").click(function(){
				var Obj=$(this);
				$(".popeScroll").hide();
				var index = $(".tab").index(this)+1;
				var $scroll = $("#scroll_con_"+index);
				if($scroll.length==0){
					
					$("#con_"+index).popeScroll({
						offset_top:-300,
						top:25,
						mousewheelBox:"tabscontent"
					});
				}else{
					$scroll.show();
				}
				
				$(".subtab").tabSwitch('moveTo',{index: $(".tab").index(this)},function(){
					
				});
			});
			
			$("#navigation").hover(function(){
				$(this).removeClass("transparent_0");
				$(this).addClass("transparent_class");
			},function(){
				$(this).removeClass("transparent_class");
				$(this).addClass("transparent_0");
			});

			
			$(".tab").hover(function(){
				$(this).css("font-size","24px");
				$(this).css("background","url(../../image/bg/16.png)");
			},function(){
				$(this).css("font-size","18px");
				$(this).css("background","url(../../image/bg/15.png)");
			});
			
			$("#con_1").popeScroll({
				offset_top:-300,
				top:25,
				mousewheelBox:"tabscontent"
			});
			

		});
		function refresh(){
			var winheight = $(window).height();
			var winwidth = $(window).width();
			$(".subtab").css("height",winheight-150);
			$("#bodydiv").css("height",winheight);
			$("#box").css("height",winheight-100);

			
			
		}
		function showNews(id){
			window.parent.resizeWin("news1",0.6,0.9);
			window.location.href = "shownews.html?id="+id;
			
		}
		
		function getDivStr(json){
			var divstr = "";
			var type = json.type;
			var id = json.id;
			var title = json.title;
			var time = json.time;
			var author = json.author;
			var content = json.content;
			$con = $(content);
			var txt = $con.text();
			txt = txt.substring(0,100)+"...";
			
			var $img = $con.find("img");
			if($img.length!=0){
				var imgsrc = $img.attr("src");
				divstr = divstr + '<div class="newsimg"><img onclick="showNews(\''+id+'\');" title="点击查看" src="'+imgsrc+'" /></div>';
			}
			divstr = divstr + '<div class="newstitle" onclick="showNews(\''+id+'\');">'+title+'</div>';
			divstr = divstr + '<div class="newstitle2">'+author+'    '+time+'</div>';
			divstr = divstr + '<div class="newsdes"><p/>'+txt+'<p/></div>';
			return divstr;
			
		}
		
		function addConToHtml(i,index,divstr){
			if(i%3==0){
				$("#left_"+index).append(divstr);
			}
			if(i%3==1){
				$("#center_"+index).append(divstr);
			}
			if(i%3==2){
				$("#right_"+index).append(divstr);
			}
		}
		
	</script>
</head>
<body style="background-color=transparent;width:100%;margin-left:0px;margin-top:0px;">
	<div id="bodydiv" style="background:url(../../css/pepper-grinder/images/ui-bg_fine-grain_10_eceadf_60x60.png)">
		<div id="navigation" class="navigation transparent_0" >
			<div href="#tab-1" class="tab" >全部</div>
			<div href="#tab-2" class="tab" >国际</div>
			<div href="#tab-3" class="tab" >国内</div>
			<div href="#tab-4" class="tab" >社会</div>
			<div href="#tab-5" class="tab" >明星</div>
			<div href="#tab-6" class="tab" >音乐</div>
			<div href="#tab-7" class="tab" >探索</div>
		</div>
		<div id="box" style="width:100%;float:left;">
			<div id="tabscontent" >
				<div id="tab-1" class="subtab">
					<div id="con_1" style="width:80%;padding-left:10%;float:left;" class="newscon">
						<div id="left_1" style="float:left;width:33%;" >
							
								
						</div>
						<div id="center_1" style="float:left;width:33%;" >
						
						</div>
						<div id="right_1" style="float:left;width:33%;" >
						
						</div>
					</div>
				</div>
				<div id="tab-2" class="subtab">
					<div id="con_2" style="width:80%;padding-left:10%;float:left;" class="newscon">
						<div id="left_2" style="float:left;width:33%;" >
							
								
						</div>
						<div id="center_2" style="float:left;width:33%;" >
						
						</div>
						<div id="right_2" style="float:left;width:33%;" >
						
						</div>
					</div>
				</div>
				<div id="tab-3" class="subtab">
					<div id="con_3" style="width:80%;padding-left:10%;float:left;" class="newscon">
						<div id="left_3" style="float:left;width:33%;" >
							
								
						</div>
						<div id="center_3" style="float:left;width:33%;" >
						
						</div>
						<div id="right_3" style="float:left;width:33%;" >
						
						</div>
					</div>
				</div>
				<div id="tab-4" class="subtab">
					<div id="con_4" style="width:80%;padding-left:10%;float:left;" class="newscon">
						<div id="left_4" style="float:left;width:33%;" >
							
								
						</div>
						<div id="center_4" style="float:left;width:33%;" >
						
						</div>
						<div id="right_4" style="float:left;width:33%;" >
						
						</div>
					</div>
				</div>
				<div id="tab-5" class="subtab">
					<div id="con_5" style="width:80%;padding-left:10%;float:left;" class="newscon">
						<div id="left_5" style="float:left;width:33%;" >
							
								
						</div>
						<div id="center_5" style="float:left;width:33%;" >
						
						</div>
						<div id="right_5" style="float:left;width:33%;" >
						
						</div>
					</div>
				</div>
				<div id="tab-6" class="subtab">
					<div id="con_6" style="width:80%;padding-left:10%;float:left;" class="newscon">
						<div id="left_6" style="float:left;width:33%;" >
							
								
						</div>
						<div id="center_6" style="float:left;width:33%;" >
						
						</div>
						<div id="right_6" style="float:left;width:33%;" >
						
						</div>
					</div>
				</div>
				<div id="tab-7" class="subtab">
					<div id="con_7" style="width:80%;padding-left:10%;float:left;" class="newscon">
						<div id="left_7" style="float:left;width:33%;" >
							
								
						</div>
						<div id="center_7" style="float:left;width:33%;" >
						
						</div>
						<div id="right_7" style="float:left;width:33%;" >
						
						</div>
					</div>
				</div>
			</div>
		</div>
			

		
	</div>
	
	
</body>
</html>